<template>
  <view class="list-card">
    <view
      class="list-con"
      v-for="(item, index) in listConf"
      :key="index"
      hover-class="hover-active"
      @click="toUrl(item.prop)"
    >
      <view class="list-item">
        <image :src="item.icon" style="width: 100rpx; height: 100rpx"></image>
        <text class="item-title">{{ item.title }}</text>
      </view>
      <template v-if="item.text">
        <text class="item-text">{{ item.text }}</text>
        <uni-icons type="right" color="#c1c1c1" size="16"></uni-icons>
      </template>
      <template v-else>
        <text class="item-count">{{ msgCount[item.prop] }}</text>
        <uni-icons type="right" color="#c1c1c1" size="16"></uni-icons>
      </template>
    </view>
  </view>
</template>

<script setup>
import listIcon1 from "@/static/message/m1.png";
import listIcon2 from "@/static/message/m2.png";
import listIcon3 from "@/static/message/m3.png";
import listIcon4 from "@/static/message/m4.png";
import listIcon5 from "@/static/message/m5.png";
import listIcon6 from "@/static/message/m6.png";
import { getItem } from "@/utils/storage";

const props = defineProps({
  msgCount: {
    type: Object,
    default: () => {},
  },
});

const listConf = reactive([
  {
    icon: listIcon1,
    title: "我收藏的人",
    prop: "my_collect",
  },
  {
    icon: listIcon2,
    title: "收藏我的人",
    prop: "collect_my",
  },
  {
    icon: listIcon3,
    title: "谁看过我",
    prop: "look_my",
  },
  {
    icon: listIcon4,
    title: "解锁我的",
    prop: "contact_my",
  },
  {
    icon: listIcon5,
    title: "我解锁的",
    prop: "my_contact",
  },
  {
    icon: listIcon6,
    title: "精准搜索",
    text: "全平台资源实时更新",
    prop: 6,
  },
]);

const toUrl = (prop) => {
  const { appLogin, phone } = getItem("user_info") || {};
  if (!appLogin) {
    uni.navigateTo({ url: "/subPages/register/index" });
    return;
  }
  if (!phone) {
    uni.navigateTo({ url: "/subPages/register/contact" });
    return;
  }
  if (prop == 6) {
    uni.navigateTo({ url: "/subPages/search/index" });
  } else {
    uni.navigateTo({ url: "/subPages/message/index?pageType=" + prop });
  }
};
</script>

<style lang="scss" scoped>
.list-card {
  overflow: hidden;
  background: #fff;
  padding: 0 30rpx;
  .list-con {
    border-bottom: 1rpx solid #e6e6e6;
    @include flexAlignCenter;
    justify-content: space-between;
    padding: 34rpx 0;
    .list-item {
      flex: 1;
      @include flexAlignCenter;
    }
    .item-title {
      color: #333;
      font-size: 36rpx;
      font-weight: bold;
      margin-left: 20rpx;
    }
    &:last-child {
      border: none;
    }
  }

  .item-text {
    font-weight: 500;
    font-size: 28rpx;
    color: #999;
  }

  .item-count {
    font-size: 32rpx;
    color: #666;
    margin-right: 20rpx;
    font-weight: 500;
  }
}
</style>
